// Window.onload 表示等页面中所有代码执行完毕之后再执行该处的代码
window.onload = function () {

  // 定义路径导航函数
  // 执行函数
  navPathDataBind();
  function navPathDataBind () {

    // 获取元素
    var navPath = document.querySelector('#wrapper #content .contentMain #navPath');

    // 获取数据
    const path = goodData.path;

    for (let i = 0; i < path.length; i++) {
      // 进行判断是否为最后一项，最后一项不添加跳转和斜杠\
      if (i == path.length - 1) {
        // 注册a标签
        var aNode = document.createElement("a");
        // 添加内容
        aNode.innerText = path[i].title;
        // 给标签添加子标签
        navPath.appendChild(aNode);
      } else {
        // 创建a标签
        var aNode = document.createElement("a");
        // 添加内容
        aNode.innerText = path[i].title;
        // 给标签添加跳转链接
        aNode.href = path[i].url;

        // 创建i标签
        var iNode = document.createElement("i");
        iNode.innerText = "/";

        // 给标签添加子标签
        navPath.appendChild(aNode);
        navPath.appendChild(iNode);
      }
    }
  }

  // 定义放大镜的移入移出效果
  bigClassBind();
  function bigClassBind () {
    // 获取元素节点
    // 小图
    const smallPic = document.querySelector(".smallPic");
    // 大图
    const bigPic = document.querySelector(".bigPic");
    // 蒙版元素
    const mask = document.querySelector(".mask");

    // 鼠标移入事件
    smallPic.onmouseover = function () {
      // 修改显示
      bigPic.style.display = "block";
      mask.style.display = "block";

      // 鼠标移动事件
      smallPic.onmousemove = function (event) {

        // 获取蒙版元素
        let maskDiv = document.querySelector(".mask");
        // 获取大图框
        let BigPic = document.querySelector(".bigPic");
        // 获取大图
        let BigImg = document.querySelector(".bigPic>img");
        // 获取边框距离
        let left = event.clientX - smallPic.getBoundingClientRect().left - maskDiv.offsetWidth / 2;
        let top = event.clientY - smallPic.getBoundingClientRect().top - maskDiv.offsetHeight / 2;

        // 判断
        if (left < 0) {
          left = 0;
        } else if (left > smallPic.clientWidth - maskDiv.offsetWidth) {
          left = smallPic.clientWidth - maskDiv.offsetWidth + 2;
        }

        if (top < 0) {
          top = 0;
        } else if (top > smallPic.clientHeight - maskDiv.offsetHeight) {
          top = smallPic.clientHeight - maskDiv.offsetHeight + 2;
        }

        // 将鼠标数值赋值给蒙版元素的边距
        maskDiv.style.top = top + "px";
        maskDiv.style.left = left + "px";

        // 移动鼠标，大图动态显示
        let scale = (smallPic.clientWidth - maskDiv.offsetWidth) / (BigImg.offsetWidth - BigPic.clientWidth);

        BigImg.style.left = -left / scale + 'px';
        BigImg.style.top = -top / scale + 'px';

      }
    }

    // 鼠标移出事件
    smallPic.onmouseout = function () {
      // 修改隐藏
      bigPic.style.display = "none";
      mask.style.display = "none";
    }
  }

  // 动态渲染放大镜缩略图的数据
  thumbnailData();
  function thumbnailData () {
    // 获取ul
    const ul = document.querySelector(".picList ul");
    // 获取img数据
    const imagesSrc = goodData.imagessrc;
    // 循环遍历数据
    for (let i = 0; i < imagesSrc.length; i++) {
      // 创建li节点
      let liNode = document.createElement("li");
      // 创建img节点
      let imgNode = document.createElement("img");
      // img节点添加属性
      imgNode.src = imagesSrc[i].s;
      // 分别在ul和li下添加子节点
      liNode.appendChild(imgNode);
      ul.appendChild(liNode);
    }
  }

  // 点击缩略图的效果
  thumbnailClick();
  function thumbnailClick () {
    // 获取对应节点
    // li中图片节点
    let liNodes = document.querySelectorAll(".picList li img");
    // 小图
    let smallPic = document.querySelector(".smallPic img");
    // 大图
    let bigPic = document.querySelector(".bigPic img");
    // console.log(liNodes, smallPic, bigPic);
    for (let i = 0; i < liNodes.length; i++) {
      liNodes[i].addEventListener("click", function () {
        // 修改小图
        smallPic.src = liNodes[i].src;
        // 修改大图
        bigPic.src = liNodes[i].src;
      })
    }
  }

  // 点击缩略图左右切换效果
  thumbnailLeftRightClick();
  function thumbnailLeftRightClick () {
    // 获取节点
    // 左侧
    let prev = document.querySelector(".prev");
    // 右侧
    let next = document.querySelector(".next");
    // 可视的div
    let picList = document.querySelector(".picList");
    // 获取ul
    let ul = document.querySelector(".picList ul");
    // 获取所有的li节点 
    let liNodes = document.querySelectorAll(".picList ul li");

    // 获取移动距离(两个图片加边距,以及边距的控制)
    // 发生起点
    let start = 0;
    // 步长
    let step = (liNodes[0].offsetWidth + 20) * 2;
    // 总体运动的距离值
    let endPostion = (liNodes.length - 5) * (liNodes[0].offsetWidth + 20);

    // 添加事件
    // 左侧
    prev.onclick = function () {
      start -= step;
      // 判断是否超出最长的移动距离
      if (start <= 0) {
        start = 0;
      }
      ul.style.left = -start + 'px';
    }
    // 右侧
    next.addEventListener("click", function () {
      start += step;
      // 判断是否超出最长的移动距离
      if (start >= endPostion) {
        start = endPostion;
      }
      ul.style.left = -start + 'px';
    })
  }

  // 右侧上半部分商品详情动态渲染
  rightTopData();
  function rightTopData () {
    // 获取节点
    // li节点
    let liNodes = document.querySelectorAll(".picList ul li");
    // 获取数据
    let data = goodData.goodsDetail;

    // 获取上半部分节点
    // 标题
    let hNode = document.querySelector(".rightTop h3");
    // 简介
    let pNode = document.querySelector(".rightTop>p");
    // 价格
    let price = document.querySelector(".price>p");
    // 加价购
    let aaa = document.querySelector(".aaa");
    // 满减
    let bbb = document.querySelector(".bbb");
    // 支持
    let support = document.querySelector(".support>p");
    // 配送地址
    let address = document.querySelector(".address>p");
    // 评论数
    let pingLun = document.querySelector(".pingLun");
    // 循环添加事件
    for (let i = 0; i < liNodes.length; i++) {
      liNodes[i].onclick = function () {
        // 标题
        hNode.innerText = data.title;
        // 简介
        pNode.innerText = data.recommend;
        // 价格
        price.innerText = data.price;
        // 加价购
        aaa.innerText = data.promoteSales.type;
        // 满减
        bbb.innerText = data.promoteSales.content;
        // 支持
        support.innerText = data.support;
        // 配送地址
        address.innerText = data.address;
        // 评论数
        pingLun.innerText = data.evaluateNum;
      }
    }
  }

  // 右侧下半部分商品参数的动态渲染
  rightBottomData();
  function rightBottomData () {
    // 获取数据
    let crumbData = goodData.goodsDetail.crumbData;   // 数组
    // 获取节点
    let choose = document.querySelector(".chooseWrap");
    // 循环遍历数据
    for (let i = 0; i < crumbData.length; i++) {
      // 创建dl
      let dlNode = document.createElement("dl");
      let dtNode = document.createElement("dt");
      dtNode.innerText = crumbData[i].title;
      // 父元素追加节点
      dlNode.appendChild(dtNode);

      // 循环每一项title中的值
      for (let j = 0; j < crumbData[i].data.length; j++) {
        // 创建dd节点
        let ddNode = document.createElement("dd");
        // 添加信息
        ddNode.innerText = crumbData[i].data[j].type;

        ddNode.setAttribute('price', crumbData[i].data[j].changePrice);
        // 添加节点
        dlNode.appendChild(ddNode);
      }
      // 向choose节点中添加子节点
      choose.appendChild(dlNode)
    }
  }

  // 点击商品参数后的颜色排他效果     和面包屑的动态实现
  clickddBind();
  function clickddBind () {
    // 获取节点
    // 获取dl
    let dlNodes = document.querySelectorAll(".chooseWrap dl");

    // 获取choose节点,用于下方的动态添加节点
    let choose = document.querySelector(".choose");

    // 准备一个空数组, 用于存放参数,数组的长度等于参数名的长度
    var arr = new Array(dlNodes.length);
    // 数组填充值
    arr.fill(0);

    // 遍历所有的dl
    for (let a = 0; a < dlNodes.length; a++) {
      // 获取第i个dl下的dd
      let ddNodes = dlNodes[a].querySelectorAll(".chooseWrap dl dd");

      // 循环遍历并添加点击事件
      for (let i = 0; i < ddNodes.length; i++) {

        ddNodes[i].onclick = function () {

          // 每次点击之前将数组清空
          choose.innerHTML = "";
          // 再循环将所有dd的文字颜色换成#666
          for (let j = 0; j < ddNodes.length; j++) {
            ddNodes[j].style.color = '#666';
          }
          // 将所点击的元素设置文字颜色为red
          ddNodes[i].style.color = "red";

          // 点击哪一个dd, 动态的产生一个新的mark元素
          arr[a] = ddNodes[i];

          // 调用修改价格函数
          changePriceSind(arr);

          // 遍历函数
          arr.forEach(function (value, index) {
            if (value) {
              //创建div元素
              let markDiv = document.createElement('div');
              //并且设置class属性
              markDiv.className = 'mark';
              //并且设置值
              markDiv.innerText = value.innerText;
              //创建a元素
              let aNode = document.createElement('a');
              //并且设置值
              aNode.innerText = 'X';
              //并且设置下标
              aNode.setAttribute('index', index);
              //让div追加a 
              markDiv.appendChild(aNode);

              //让choose元素追加div
              choose.appendChild(markDiv);

            }
          })

          // 获取并给a标签添加点击事件
          let aNodes = document.querySelectorAll(".mark a");
          for (let i = 0; i < aNodes.length; i++) {
            aNodes[i].onclick = function () {

              //获取点击的a标签身上的index属性值
              let idx1 = this.getAttribute('index');
              arr[idx1] = 0;

              //查找对应下标的那个dl行中的所有的dd元素
              let ddList = dlNodes[idx1].querySelectorAll('dd');

              //遍历所有的dd元素
              for (let m = 0; m < ddList.length; m++) {
                //其余所有dd的文字颜色为灰色
                ddList[m].style.color = "#666";
              }

              //默认的第一个dd文字颜色恢复成红色
              ddList[0].style.color = 'red';

              //删除对应下标位置的mark标记
              choose.removeChild(this.parentNode);

              // 调用修改价格函数
              changePriceSind(arr);
            }
          }
        }
      }
    }
  }

  // 点击修改商品价格
  function changePriceSind (arr) {
    // 获取操作节点
    let oldPrice = document.querySelector("#wrapper #content .contentMain .center .right .rightTop .priceWrap .priceTop .price > p");

    // 获取最低配置价格
    let price = goodData.goodsDetail.price;

    // 获取配置项中的价格

    // 遍历数组
    for (let i = 0; i < arr.length; i++) {
      // 判断是否为0
      if (arr[i]) {

        // 强制数据类型转换
        let changePrice = Number(arr[i].getAttribute('price'));

        // 配置增加价格增加
        price += changePrice;
      }
    }
    // 将结果赋值给节点
    oldPrice.innerText = price;
    topPrice();
  }

  // 搭配项原价格根据上方价格同步修改
  function topPrice () {
    // 获取节点
    // 左边节点
    let leftprice = document.querySelector("#wrapper #content .goodsDetailWrap .rightDetail .chooseBox .listWrap .left p");
    // 上方节点
    let topPrice = document.querySelector("#wrapper #content .contentMain #center #right .rightTop .priceWrap .priceTop .price p");
    leftprice.innerText = topPrice.innerText;
  }

  // 点击选择搭配，根据选中效果进行价格计算
  choosePrice();
  function choosePrice () {
    // 获取节点
    let ipts = document.querySelectorAll(".middle li div input");
    // 获取原价格
    let leftprice = document.querySelector("#wrapper #content .goodsDetailWrap .rightDetail .chooseBox .listWrap .left p");
    // 获取右边结算框的价格
    let newprice = document.querySelector("#wrapper #content .goodsDetailWrap .rightDetail .chooseBox .listWrap .right i");
    // 遍历并取出搭配项新增的数值
    for (let i = 0; i < ipts.length; i++) {
      ipts[i].onclick = function () {
        let oldprice = Number(leftprice.innerText.slice(1));
        console.log(oldprice);
        for (let j = 0; j < ipts.length; j++) {
          if (ipts[j].checked) {
            oldprice = oldprice + Number(ipts[j].value);
          }
        }
        newprice.innerText = '¥' + oldprice;
      }
    }
  }

  //封装一个公共的选项卡函数 用于下方直接调用
  /**
   * ① 被点击的元素   tabBtns
   * ② 被切换显示的元素  tabConts
   */
  function Tab (tabBtns, tabConts) {
    for (var i = 0; i < tabBtns.length; i++) {
      tabBtns[i].index = i;
      tabBtns[i].onclick = function () {
        for (var j = 0; j < tabBtns.length; j++) {
          tabBtns[j].className = '';
          tabConts[j].className = ''
        }
        this.className = 'active';
        tabConts[this.index].className = 'active';
      }
    }
  }

  //点击左侧选项卡
  leftTab();
  function leftTab () {
    //被点击的元素
    var h4s = document.querySelectorAll('#wrapper #content .goodsDetailWrap .leftAside .asideTop h4');
    //被切换显示的元素
    var divs = document.querySelectorAll('#wrapper #content .goodsDetailWrap .leftAside .asideBottom div');
    //调用函数
    Tab(h4s, divs);
  }

  //点击右侧选项卡
  rightTab();
  function rightTab () {
    //被点击的元素
    var lis = document.querySelectorAll('#wrapper #content .contentMain .goodsDetailWrap .rightDetail .BottomDetail .tabBtns li');
    //被切换显示的元素
    var divs = document.querySelectorAll('#wrapper #content .contentMain .goodsDetailWrap .rightDetail .BottomDetail .tabContents div');
    //调用函数
    Tab(lis, divs);
  }
}